<template>
  <div>
    <el-card class="card">
      <div class="title">输入账号</div>
      <el-form :rules="rules" class="form" ref="ruleForm" :model="formData">
        <el-form-item prop="userName">
          <div>请输入要重置密码的账号</div>
          <el-input v-model="formData.userName"></el-input>
        </el-form-item>
        <el-button type="primary" class="next" size="large" @click="nextFun">下一步</el-button>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { sendResetCode } from "@/api/user";
export default {
  data() {
    return {
      formData: {},
      rules: {
        userName: [{ required: true, message: "请输入账号", trigger: "blur" }]
      }
    };
  },
  methods: {
    nextFun() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          sendResetCode(this.formData.userName).then(res => {
            this.$router.push({
              path: "/changePwd",
              query: { userName: this.formData.userName }
            });
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style>
.card .el-card__body {
  padding: none !important;
}
</style>
<style lang="scss" scoped>
.card {
  width: 700px;
  margin: auto;
  margin-top: 100px;
  .title {
    padding-bottom: 20px;
    font-size: 30px;
    text-align: center;
    border-bottom: solid 1px #ccc;
  }
  .form {
    padding: 80px 0;
    width: 500px;
    margin: auto;
    .next {
      margin: auto;
      margin-top: 20px;
      width: 100%;
      text-align: center;
    }
  }
}
</style>